import React, { useEffect } from 'react';
import { getFailedList } from '../sysRedux/getAppList';
import { connect } from 'react-redux';
import { Table, Tag, Space} from 'antd';
import { render } from '@testing-library/react';
const { Column } = Table;

const Failed = (props) => {
    useEffect(() => {
        props.dispatch(getFailedList());
    }, []);
    const columns = [
        {
            title:'APP图标',
            key:'icon',
            render:text =>(
                <img src={text.icon} style={{width:'25px'}}/>
            )
        },
        {
            title: 'APP名称',
            dataIndex: 'appname',
            key: 'appname',
        },
        {
            title: '功能名称',
            dataIndex: 'funcname',
            key: 'funcname',
        },
        {
            title: '作者',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '详情',
            key: 'detail',
            render: (text,record) => (
                <Space size="middle">
                    <a onClick={()=>viewDetails(record.id)}>详情</a>
                </Space>
            ),
        },
        {
            title: '审核结果',
            key: 'result',
            render: () => {
                let color = 'volcano';
                return(
                    <Tag color={color}>
                        驳回
                    </Tag>
                )
            },
        },
        {
            title:'驳回原因',
            dataIndex:'reason',
            key:'reason'
        }
    ];

    const viewDetails = (id) =>{
        props.history.push({pathname:'/home/viewdetails',state:id});
    }

    return (
        <Table columns={columns} dataSource={props.failed} pagination={false} />
    )
}

const mapStateToProps = (state) => ({
    failed: state.failed
})

export default connect(mapStateToProps)(Failed);
